<template>
  <view class="playerRank">
    <view class="title">
      <uni-title type="h2" :title="userStore.selectedVote?.tittle"></uni-title>
    </view>
    <view class="caption">
      <text class="text">当前选手排名</text>
    </view>
    <!-- 排名列表 -->
    <view class="rankList">
      <navigator
        :url="`/pages/vote/playerDetail?id=${item.id}`"
        open-type="navigate"
        hover-class="navigator-hover"
        class="item"
        v-for="(item, index) in playerList"
        :key="index"
        @tap="handleSelectedPlayer(item)"
      >
        <uni-badge
          :text="index + 1"
          absolute="leftTop"
          :offset="[3, 3]"
          size="normal"
          type="primary"
        >
          <image class="player-image" :src="item.cover" />
        </uni-badge>
        <view class="player-info">
          <view class="player-header">
            <view class="player-name">
              {{ item.tittle }}
              <uni-tag
                :text="`${index + 1}号选手`"
                type="primary"
                size="small"
                :inverted="true"
              />
            </view>
            <view class="player-vote-num">{{ item.num }}票</view>
          </view>
          <view class="player-desc">{{ item.intro }}</view>
          <button class="vote-btn" @tap.stop="userVote(index + 1, item)">
            投票
          </button>
        </view>
      </navigator>
    </view>
    <view class="loading-text">
      {{ playerList.length >= total ? "没有更多数据~" : "正在加载..." }}
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  playerParamsType,
  playerResponseType,
  PublishState,
} from "@/types/vote";
import { getPlayerListAPI, votePlayerAPI } from "@/api/player";
import { useUserStore } from "@/stores";
import { handleCoverToImageList } from "@/utils/vote";

onLoad(async () => {
  await getPlayerList();
});

// 接收页面参数
const query = defineProps<{
  id: string;
}>();

const userStore = useUserStore();

const pageParams: playerParamsType = reactive({
  actId: query.id,
  page: 1,
  size: 20,
  order: 2,
  state: PublishState.approved,
});

const total = ref(0);

const playerList = ref<playerResponseType[]>([]);

//重新获取数据
const refreshData = async () => {
  pageParams.page = 1;
  playerList.value = [];
  await getPlayerList();
};

const userVote = (index: number, playerData: playerResponseType) => {
  //是否投票某选手提示弹窗
  uni.showModal({
    title: "投票提示",
    content: `是否投票给${index}号选手 ${playerData.tittle}`,
    success: async function (res) {
      if (res.confirm) {
        await votePlayerAPI(playerData.id);
        uni.showToast({
          title: "投票成功",
          icon: "success",
          duration: 1000,
        });
        refreshData();
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};

//获取选手列表
const getPlayerList = async () => {
  const res = await getPlayerListAPI(pageParams);
  total.value = res.data.total;
  playerList.value.push(...res.data.records);
};

// 加载更多数据
const loadMore = async () => {
  if (playerList.value.length >= total.value) return; // 已经加载完毕
  pageParams.page += 1; // 更新页码
  await getPlayerList(); // 重新获取数据
};

const handleSelectedPlayer = (item: playerResponseType) => {
  userStore.selectedPlayer = item;
  userStore.selectedPlayer.images = handleCoverToImageList(item.cover);
};
</script>

<style scoped lang="scss">
.playerRank {
  display: flex;
  flex-direction: column;
  width: 100%;

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
  }

  .caption {
    display: flex;
    justify-content: center;
    line-height: 1;
    padding: 20rpx 0 20rpx;
    font-size: 32rpx;
    color: #333;
    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 28rpx 0 30rpx;

      &::before,
      &::after {
        content: "";
        width: 20rpx;
        height: 20rpx;
        background-image: url(@/static/images/bubble.png);
        background-size: contain;
        margin: 0 10rpx;
      }
    }
  }

  .rankList {
    display: flex;
    flex-direction: column;
    margin: 20rpx 0;
    .item {
      display: flex;
      margin: 10rpx 20rpx;
      padding: 20rpx;
      border-radius: 12rpx;
      background-color: #fff;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      border: 1px solid #ebeef5;
      .player-image {
        width: 200rpx;
        height: 200rpx;
      }
      .player-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20rpx;
        flex-grow: 1;
        .player-header {
          display: flex;
          justify-content: space-between;
          .player-name {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
          }
          .player-vote-num {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
          }
        }
        .player-desc {
          font-size: 28rpx;
          display: -webkit-box; /* 需要将 display 设置为 -webkit-box */
          -webkit-box-orient: vertical; /* 设置盒子的方向为垂直 */
          -webkit-line-clamp: 2; /* 设置要显示的行数为 2 */
          overflow: hidden;
          word-break: break-all;
          white-space: normal; /* 允许文本换行 */
          max-width: 450rpx;
          color: #666;
        }

        .vote-btn {
          float: 1;
          width: 100rpx;
          font-size: 20rpx;
          background-color: #2979ff;
          color: #fff;
          margin: 0;
          margin-left: auto; /* 使按钮向右对齐 */
        }
      }
    }
  }
}

// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}
</style>
